<template>
  <div class="container">
    <div class="list">
      <div class="table">
        <div class="row">
          <div class="column">共2款</div>
          <div class="column">
            <div class="product-info flex-y-center">
              <el-image src="@/assets/img/test.png" class="cover"></el-image>
              <div class="right">
                <div class="name">山推矿山利器 全新 470挖掘机</div>
                <div class="price">￥1200000</div>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="product-info flex-y-center">
              <el-image src="@/assets/img/test.png" class="cover"></el-image>
              <div class="right">
                <div class="name">山推矿山利器 全新 470挖掘机</div>
                <div class="price">￥1200000</div>
              </div>
            </div>
          </div>
          <div class="column">
            <el-select placeholder="新增设备">
                <el-option label="哈哈哈" value="1"></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="table">
        <div class="row" v-for="(item, index) in 10" :key="index">
          <div class="column column-th">参数名称</div>
          <div class="column">名称1</div>
          <div class="column">参数名称</div>
          <div class="column">名称1</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ComponentName",

  data() {
    return {
      // state
    };
  },

  methods: {
    // method
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: auto;
}

.product-info {
  .cover {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
  }

  .right {
    padding-left: 15px;

    .name {
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      padding-bottom: 20px;
    }

    .price {
      font-weight: 400;
      font-size: 18px;
      color: #f42d1f;
    }
  }
}

.list {
  background: #fff;
  padding: 30px;

  .table {
    display: table;
    width: 100%;
    border-collapse: collapse;

    .row {
      display: table-row;

      .column {
        padding: 20px 30px;
        display: table-cell;
        border: 1px solid #ededed;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        width: 25%;
      }

      .column-th {
        background: #f7f7f7;
        color: #818181;
      }
    }
  }
}
</style>
